<template>
  <div class="weather-box">
    <div class="left-content">
      <div class="content-item">
        <div class="item-left">
          <img v-if="weatherData.icon" :src="weatherData.icon" alt="" />
          <img v-else src="../assets/weatherCondition.png" alt="" />
        </div>
        <div class="item-right">
          <div class="title">{{ setTitle }}</div>
          <div class="content">
            {{ weatherData.minTemperatura }}°C-{{
              weatherData.maxTemperatura
            }}°C
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'weatherBox',
    props: {
      weatherData: {
        type: Object,
        default: () => ({
          icon: '',
          conditions: '',
          minTemperatura: 5,
          maxTemperatura: 15,
        }),
      },
    },
    data() {
      return {}
    },
    computed: {
      setTitle(){
        return this.weatherData.conditions?this.weatherData.conditions:this.$t('Byname28')
      }
    }
  }
</script>
<style scoped lang="scss">
  .weather-box {
    position: absolute;
    z-index: 101;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 240px;
    height: 60px;
    font-family: 'AlibabaPuHuiTi_2_115_Black';
    pointer-events: all;
    user-select: none;

    .left-content {
      width: fit-content;

      .content-item {
        display: flex;
        align-items: center;

        .item-left {
          margin-right: 11px;
          font-family: 'Alibaba-Bold';
          font-size: 46px;
          font-weight: bold;
          line-height: 59px;
          color: #e7f6f8;
          letter-spacing: 1px;
          background: linear-gradient(180deg, #f2fdff 0%, #c5f7ff 100%);
          background-clip: text;
          -webkit-text-fill-color: transparent;

          img {
            width: 32px;
          }
        }

        .item-right {
          .title {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: 600;
            line-height: 22px;
            color: #e7f6f8;
            white-space: nowrap;
          }

          .content {
            width: 90px;
            margin-top: 5px;
            font-size: 16px;
            font-weight: bold;
            line-height: 21px;
            color: #e7f6f8;
            background: linear-gradient(180deg, #f2fdff 0%, #c5f7ff 100%);
            background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }
    }
  }
</style>
